<template>
    <fieldset>
        <legend>组件缓存</legend>
        <button @click="toggleTab" :class="{active:componentName==='tab'}">点击切换成tab组件</button>
        <button @click="toggleOther" :class="{ active: componentName === 'other' }">点击切换成其它组件</button>
        <keep-alive exclude="other">
            <div class="container" :is="componentName"></div>
        </keep-alive>
    </fieldset>
</template>
<script>

//keepalive的作用

//保持组件的状态,避免组件重复渲染带来性能的问题(缓存组件)

//keepalive一般是套在动态路由的外层


//属性

//include 包含 组件名字写到include属性中 那么组件就会被缓存

//exclude 排除 组件的名字写到exclude中 组件就不会被缓存了

//max 最多可以缓存多少个组件实例

import tab from "../tab"
import other from "../other"
export default {
    data() {
        return {
            componentName: 'tab'
        }
    },
    components: {
        tab,
        other
    },
    methods: {
        toggleOther() {
            this.componentName = 'other'
        },
        toggleTab() {
            this.componentName = 'tab'
        }
    }
}
</script>
<style scoped>
.active {
    background-color: hotpink
}
</style>